<!--
 * @Author: hashMi 854059946@qq.com
 * @Date: 2023-12-06 11:12:27
 * @LastEditors: hashMi 854059946@qq.com
 * @LastEditTime: 2023-12-20 15:12:07
 * @FilePath: /audition-app/subPages/chinese-studies/chinese-studies.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="chinese-studies">
    <!-- 自定义顶部搜索框 用于搜索跳转 skipUrl:跳转url为绝对路径 /pages开头 -->
    <!-- <cc-headSearch skipUrl="/pages/index/search"></cc-headSearch> -->
    <view class="chinese-studies-header">
      <search
        :customStyle="{ padding: '12rpx 32rpx' }"
        class="margin-t-24"
        width="auto"
        fontSize="26rpx"
        placeholder="请输入关键词"
        @search="getSearchList"
        @clear="handleClear"
        iconPosition="prefix"
        shadow
      />
    </view>

    <view class="course-container">
      <load-list :localData="allData" keyName="course_video_resource">
        <template v-slot="{ list }">
          <view class="content-list">
            <view
              class="goods-item"
              v-for="(item, key) in list"
              :key="key"
              @click="itemClick(item, $event)"
            >
              <image :src="$helper.filterCover(item.course_log[0].url)"></image>
              <view class="goods-item-content">
                <view class="goods-title text-line-hide">{{
                  item.course_title
                }}</view>
                <view class="goods-little-title gary-font text-line-hide">{{
                  item.course_introduction
                }}</view>
                <!-- <view class="goods-amount">
                  <text space="emsp">{{ item.amount }}</text>
                  <view class="gary-font text-line-hide">{{
                    item.amountRemark
                  }}</view>
                </view> -->
                <!-- <view class="goods-label"
                  ><rich-text :nodes="item.label"></rich-text
                ></view> -->
              </view>
            </view>
          </view>
        </template>
      </load-list>
    </view>
  </view>
</template>

<script>
import { getModelList } from "@/api";
import { getFilter } from "@/common/function";
export default {
  data() {
    return {
      // 接收路由跳转过来传递的类型
      typeList: [
        "国学",
        "舞蹈",
        "钢琴",
        "电子琴",
        "织毛衣",
        "儿童",
        "音乐",
        "书法",
        "手工",
      ],
      // 获取请求数据
      allData: [],
    };
  },
  computed: {},
  watch: {},
  mounted() {},
  async onLoad(options) {
    let { type } = options;
    console.log("type", type);
    if (type) {
      let filterType = getFilter({
        course_type: type,
      });
      this.getAllTypeData(filterType);
    } else {
      // 获取全部参数
      await this.getAllTypeData();
    }
  },
  methods: {
    itemClick(item) {
      uni.navigateTo({
        url: `/subPages/chinese-studies/detail?id=${item.course_video_resource}&text=${item.course_introduction}&title=${item.course_title}`,
      });
    },
    clickTabItem(type, index) {
      this.currentIndex = index;
      this.courseType = type;
    },
    // 搜索框
    async getSearchList(val) {
      let filterData = val
        ? getFilter(
            {
              course_title: val,
            },
            {
              method: "like",
            }
          )
        : {};

      this.getAllTypeData(filterData);
    },
    async handleClear() {
      this.getAllTypeData();
    },
    async getAllTypeData(prams = {}) {
      const { data } = await getModelList("657161cb262fbe2d9d0ac940", prams);
      this.allData = data?.list;
    },
  },
};
</script>

<style lang="scss" scoped>
.chinese-studies {
  background-color: $u-bg-color;
  overflow: hidden;
  width: 100vw;
  height: 100vh;

  &-header {
    padding: 0 20rpx;
    box-sizing: border-box;
  }
  .course-container {
    margin-top: 20rpx;
    width: 100%;
    height: calc(100vh - 20rpx - 60px);
  }

  .content-list {
    width: 100%;
    margin: 0 19rpx;
    display: flex;
    flex-wrap: wrap;
  }
  .goods-item {
    background-color: #ffffff;
    width: 347.5rpx;
    border-radius: 19rpx;
    margin: 0 19rpx 19rpx 0;
  }
  .goods-item image {
    width: 100%;
    height: 308rpx;
    border-radius: 19rpx 19rpx 0 0;
  }
  .goods-item-content {
    padding: 19rpx;
  }
  .goods-little-title {
    padding: 10rpx 0;
  }
  .goods-title {
    font-weight: bold;
  }
  .goods-amount {
    display: flex;
    align-items: baseline;
  }
  .goods-amount text {
    color: #ff0000;
  }
  .goods-amount view {
    margin-left: 22rpx;
  }
  .goods-label {
    padding: 10rpx 0 0;
  }
  .gary-font {
    color: #999;
    font-size: 22rpx;
  }
  .text-line-hide {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
